<template>
    <dl class="user">
        <dd>
            <ClientOnly>
                <div class="header" @click="store.$patch({ changeAvatar: true })">
                    <NuxtImg v-if="avatar != ''" :src="avatar" alt="" />
                    <h3>{{ userinfo.nickName }}</h3>
                    <span>
                        <NuxtImg src="/img/my.png" alt="" />
                        <i>VIP{{ userinfo.vip }}</i>
                    </span>
                </div>
            </ClientOnly>
            <ul>
                <li v-for="(item, index) in navlist" :class="activeRouter == item.path ? 'active' : ''"
                    @click="item.callback(item.path)" :key="index">
                    <NuxtImg :src="item.img" alt="" />
                    <span>{{ $t(item.lang) }}</span>
                </li>
            </ul>
            <changeAvatar />
        </dd>
        <dd>
            <slot></slot>
        </dd>
    </dl>


</template>

<script setup lang="ts">
import { ref, reactive, shallowRef, shallowReactive, watch, computed } from "vue"
let { currentRoute } = useRouter()
let store = useStore()
let avatar = computed(() => store.avatar)
let userinfo = computed(() => store.userinfo)
// 监听路由
let activeRouter = shallowRef<string>('')
watch(() => currentRoute.value, (newval) => {
    activeRouter.value = newval.fullPath
}, {
    immediate: true
})

let navlist = reactive<{
    img: string,
    lang: string,
    path: string,
    callback: Function
}[]>([{
    img: "/img/my1.png",
    lang: "language.My.card1",
    path: "/user/wallet",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my2.png",
    lang: "language.My.card4",
    path: "/user/bonus",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my3.png",
    lang: "language.My.column1",
    path: "/user/info",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my4.png",
    lang: "language.My.column3",
    path: "/user/betting",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }

}, {
    img: "/img/my5.png",
    lang: "language.My.column2",
    path: "/user/tran",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my6.png",
    lang: "language.My.card3",
    path: "/user/share",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my7.png",
    lang: "language.My.card5",
    path: "/user/vip",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my8.png",
    lang: "language.My.column4",
    path: "/user/message",
    callback: (url: string) => {
        activeRouter.value = url
        $openPage(url)
    }
}, {
    img: "/img/my9.png",
    lang: "language.My.btn",
    path: "/",
    callback: (url: string) => {
        activeRouter.value = url
        // clearNuxtState(['token',
        //     'userinfo',
        //     'coininfo',
        //     'cointype'])
        // localStorage.setItem('token','');
        // localStorage.setItem('userinfo','');
        // localStorage.setItem('coininfo','');
        // localStorage.setItem('cointype','BRL');
        let store = useStore()
        store.$patch({ userinfo: {} })
        store.$patch({ token: '' })
        store.$patch({ coininfo: {} })
        store.$patch({ cointype: 'BRL' })
        $openPage(url)
    }
}])
</script>

<style scoped lang="scss">
.user {
    width: 100%;
    min-height: calc(100vh - 90px);
    height: 100%;
    @include flex(row, space-between, flex-start);
    background-color: #24262b;
    border-radius: 10px;

    dd:nth-child(1) {
        width: 264px;
        height: 100%;
        min-height: calc(100vh - 90px);

        border-radius: 10px;

        // box-shadow: 0 3px 15px 0 rgba(4, 0, 0, .15);

        .header {
            margin-top: 30px;
            @include flex(column, flex-start, center);
            border-radius: 10px;
            cursor: pointer;

            >img {
                height: 56px;
            }

            h3 {
                font-size: 16px;
                color: #fff;
                margin: 5px 0;
            }

            span {
                display: block;
                @include flex(row, center, center);

                img {
                    width: 25px;
                    margin-right: 5px;
                }

                i {
                    font-style: normal;
                    color: #b5bac8
                }
            }
        }

        ul {
            margin-top: 20px;

            li+li {
                margin-top: 15px;
            }

            .active {
                border-left: 4px solid #0a906c;

                span {
                    color: #0a906c;
                }
            }

            li {
                width: 100%;
                padding: 10px 20px 10px 40px;
                @include flex(row, flex-start, center);
                border-left: 4px solid transparent;
                cursor: pointer;

                &:hover {
                    border-left: 4px solid #0a906c;

                    span {
                        color: #0a906c;
                    }
                }

                img {
                    width: 26px;
                    margin-right: 20px;
                }

                span {
                    color: #b5bac8;
                }
            }
        }
    }

    dd:nth-child(2) {
        min-height: calc(100vh - 90px);
        border-radius: 10px;
        padding: 40px;
        flex: 1;
        height: 100%;
        background-color: #24262b;
        box-shadow: 0 3px 15px 0 rgba(4, 0, 0, .15);

    }
}
</style>